<!DOCTYPE html>
<html style="height: 100%;">

<head>
    <title>信息科开放平台</title>
    <link rel="shortcut icon" href="/static/img/Icon.ico"> <!-- 网站图标 必须ico文件 -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="/static/js/jquery-3.4.1.min.js"></script>

    <!--引入WebSocket断线重连插件-->
    <script src="/static/js/reconnecting-websocket.min.js"></script>

    <!-- 引入CSS： elementUI -->
    <link rel="stylesheet" href="/static/element-UI/index.css">
    <!-- 引入JS： Vue (before ElementUI JS)-->
    <script src="/static/vue/vue.js"></script>
    <!-- 引入JS： ElementUI JS -->
    <script src="/static/element-UI/index.js"></script>

    <!-- 鼠标点击放烟花 -->
    <canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
    <style>
        body{
            /* 鼠标指针的样式 */
            cursor: url(/static/img/cursor.ico),auto;
        }
    </style>
    <script>
        // 低版本谷歌不支持ES6，没有padStart函数，解决办法是自己重新实现String.prototype.padStart
        // 需在head中定义
        if (!String.prototype.padStart) {
            String.prototype.padStart = function padStart(targetLength, padString) {
                targetLength = targetLength >> 0; //floor if number or convert non-number to 0;
                padString = String((typeof padString !== 'undefined' ? padString : ' '));
                if (this.length > targetLength) {
                    return String(this);
                } else {
                    targetLength = targetLength - this.length;
                    if (targetLength > padString.length) {
                        padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
                    }
                    return padString.slice(0, targetLength) + String(this);
                }
            };
        }
    </script>
</head>


<body style="height: 100%;overflow:hidden;margin: 0px;">
<div id="app" style="height: 100%;">

    <!--    顶栏  -->
    <el-row>
        <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="topMenu_handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">疫苗接种叫号系统</el-menu-item>

            <el-submenu index="2" style="float: right">
                <template slot="title" id="userNameText">信息科 陈呵呵</template>
                <el-menu-item index="2-1">个人资料</el-menu-item>
                <el-menu-item index="2-2">注销</el-menu-item>
            </el-submenu>

        </el-menu>
    </el-row>


    <el-row style="height: 100%;background-image: url(/static/img/background.jpg);background-repeat:no-repeat;background-size:100% 100%;">  <!--背景图片-->
        <!--    左侧菜单    -->
        <el-col :span="3" style="height: 100%">
            <el-menu
                    default-active="0"
                    class="el-menu-vertical-demo"
                    @open="leftMenu_handleOpen"
                    @close="leftMenu_handleClose"
                    @select="leftMenu_handleSelect"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    style="height: 100%">
                <el-menu-item index="1">
                    <i class="el-icon-menu"></i>
                    <span slot="title">叫号</span>
                </el-menu-item>
                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <span slot="title">身份证取号</span>
                </el-menu-item>
                <el-menu-item index="3">
                    <i class="el-icon-document"></i>
                    <span slot="title">统计报表</span>
                </el-menu-item>
            </el-menu>
        </el-col>

        <!--     右侧工作区域    -->
        <el-col :span="20" :offset="1"  style="height:100%;">

            <!--空白间隔栏-->
            <el-row style="height: 20px;"></el-row>

            <el-row >
                <el-empty :image-size="450"  description="Developing..." ></el-empty>
            </el-row>


        </el-col>
    </el-row>
</div>


<script>


    /*
    *  定义全局变量
    */
    var IpAndPort=window.location.host; // IP和端口号

    // 解析token
    var token=getCookie('token');
    var strings = token.split("."); //截取token，获取载体
    var userInfo = JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/"))))); //解析，需要吧‘_’,'-'进行转换否则会无法解析
    $("#userNameText")[0].innerHTML="&nbsp;[&nbsp;"+userInfo.ksmc+"&nbsp;]&nbsp;&nbsp;"+userInfo.ygxm;


    // 本页面的vue对象
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                activeIndex:'1'
            };
        },
        methods: {
            //
            // 点击【菜单栏】
            //
            topMenu_handleSelect(key, keyPath) {
                console.log(key, keyPath);
                if(key=='2-2'){
                    document.cookie = "token=;path=/";  // token置空
                    window.location.href = "http://" + IpAndPort + "/ViewController/Login";
                }
            },
            leftMenu_handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            leftMenu_handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            leftMenu_handleSelect(key, keyPath) {
                console.log(key, keyPath);
                if (key == '1') {
                    window.location.href = "http://" + IpAndPort + "/ViewController/YM_CallNumber";
                } else if (key == '2') {
                    window.location.href = "http://" + IpAndPort + "/ViewController/YM_TakeNumber";
                }
                else  if(key=='3'){
                    window.location.href = "http://" + IpAndPort + "/ViewController/YM_Statistic";
                }
            }
        }
    });



    /*
    * JS工具方法
    * */

    /**
     * 获取指定名称的cookie
     */
    function getCookie(name){
        var strcookie = document.cookie;//获取cookie字符串
        var arrcookie = strcookie.split("; ");//分割
        //遍历匹配
        for ( var i = 0; i < arrcookie.length; i++) {
            var arr = arrcookie[i].split("=");
            if (arr[0] == name){
                return arr[1];
            }
        }
        return "";
    }

    // 鼠标点击弹出❤
    jQuery(function($){
        showLoveWhenMouseClick(window, document);
    });
</script>

</body>

<!-- 在body之后加载鼠标点击特效的JS（鼠标点击放烟花、弹出爱心❤） -->
<script src="/static/js/mouse-click.js"></script>
</html>